<template>
  <div
    class="base-map-switch"
    :style="{ width: totalWidth }"
    @click="onWrapperClick"
  >
    <el-scorllbar :view-class="canScroll ? 'can-scroll' : ''">
      <div class="base-map-list">
        <div
          class="base-map-item"
          v-for="item in shownBaseMapList"
          :class="{ active: item.id === props.baseMapConfig?.id }"
          :key="item.id"
          @click="handleItemClick($event, item)"
        >
          <el-image
            class="thumbnail"
            :src="
              item.thumbnail
                ? item.thumbnail === 'amap.png'
                  ? item.thumbnail
                  : item.thumbnail.startsWith('http')
                  ? item.thumbnail
                  : 'http://' + item.thumbnail
                : ''
            "
          >
            <template #placeholder>
              <div class="placeholder"></div>
            </template>
            <template #error>
              <div class="placeholder"></div>
            </template>
          </el-image>

          <div class="name__wrapper">
            <span class="name">{{ item.name }}</span>
          </div>
        </div>
      </div>
    </el-scorllbar>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import ElScorllbar from 'element-ui/lib/scrollbar'

const props = defineProps({
  baseMapConfig: {
    type: Object,
    required: true,
  },
  baseMapList: {
    type: Array,
    default: () => [],
  },
})

const emits = defineEmits(['switch-base-map'])

/**
 * 是否已展开
 */
const expanded = ref(false)

const onWrapperClick = () => {
  if (!expanded.value) {
    expanded.value = true
  }
}

/**
 * 底图item点击
 *
 * @param {Event} event 原生事件
 *
 * @param {BaseMapConfig} item 底图配置
 */
const handleItemClick = (event, item) => {
  if (expanded.value) {
    // 如果已展开，停止事件传递，只处理自身逻辑
    event.stopPropagation()
    if (item.id === props.baseMapConfig?.id) {
      expanded.value = false
    } else {
      emits('switch-base-map', item)
    }
  }
}

/**
 * 要显示的底图列表
 */
const shownBaseMapList = computed(() => {
  if (expanded.value) {
    return props.baseMapList || []
  } else {
    const find = props.baseMapList.find(
      (item) => item.id === props.baseMapConfig?.id
    )
    if (find) {
      return [find]
    } else {
      return []
    }
  }
})

const totalWidth = computed(() => {
  if (expanded.value) {
    const totalItem =
      shownBaseMapList.value.length >= 3 ? 3 : shownBaseMapList.value.length
    return `${94 + (totalItem - 1) * (86 + 10)}px`
  } else {
    return '94px'
  }
})

/**
 * 包裹底图列表的el-scrollbar是否可以水平滚动
 */
const canScroll = computed(() => {
  return expanded.value && shownBaseMapList.value.length > 3
})

watch(
  () => props.baseMapConfig,
  () => {
    expanded.value = false
  },
  {
    deep: true,
  }
)
</script>

<style lang="scss" scoped>
$base-map-wrap-width: 94px;
$base-map-item-width: 86px;
$base-map-item-gap: 10px;

.base-map-switch {
  height: 78px;
  padding: 5px 0 0 4px;
  background: white;
  box-shadow: 0 0 8px 0 rgba(0, 44, 82, 0.2);
  border-radius: 2px;
  transition: all 0.15s ease-in-out;

  :deep(.el-scrollbar) {
    .el-scrollbar__wrap {
      //overflow-y: hidden;

      .el-scrollbar__view {
        height: 100%;
        padding-bottom: 5px;
        transition: all 0.15s ease-in-out;

        &.can-scroll {
          padding-bottom: 8px;
        }
      }
    }
  }

  .base-map-list {
    display: flex;
    align-items: center;

    height: 100%;

    .base-map-item {
      position: relative;
      width: $base-map-item-width;
      min-width: $base-map-item-width;
      height: 69px;
      cursor: pointer;

      &:not(:first-of-type) {
        margin-left: $base-map-item-gap;
      }

      .el-image.thumbnail {
        width: 100%;
        height: 100%;

        :deep(.placeholder) {
          width: 100%;
          height: 100%;
          background-color: #f3f3f3;
        }
      }

      .name__wrapper {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 20px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #999999;

        .name {
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 12px;
          color: white;
        }
      }

      &.active {
        .name__wrapper {
          background-color: #28b1e4;
        }
      }
    }
  }
}
</style>
